<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var xhr;//XMLHttpRequest 객체를 대입할 변수 - 전역변수

	function calculate() {
		//숫자 2개 조회
		var num1 = document.getElementById("num1").value;
		var num2 = document.getElementById("num2").value;

		//숫자 입력 체크
		if (isNaN(num1) || isNaN(num2)) {
			alert("계산할 숫자를 입력하세요..");
			return;
		}
		//1. XMLHttpRequest 객체 생성 
		if (window.ActiveXObject) {//IE
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} else {//나머지 웹브라우저
			xhr = new XMLHttpRequest();
		}
		//2. XMLHttpReqeust 객체를 이용해 서버로 요청
		//2-1. 요청할 서버에 정보 설정
		xhr.open("GET","/javascript/ajax/AjaxController?cmd=calc&num1="+num1+"&num2="+num2, true);//매개변수 : 1.요청방식(GET/POST), 2. 서버 URL, 3. 비동기 요청여부 (true : 비동기)
		xhr.onreadystatechange = callback; //응답처리할 함수를 event핸들러에 등록 //callback() 이렇게 닫으면 결과를 부르는것
		//함수자체를 부르기 위해서는 callback; 이렇게 해야한다.
		//2-2. 요청
		xhr.send(null);//설정된 정보를 바탕으로 서버단에 요청처리.
					//매개변수 : 1 - 요청파라미터(POST) - GET : null
					
	}

	function callback() {
		if (xhr.readyState == 4) {//서버로부터 응답을 받았을떄의 상태 값(4) 
			if (xhr.status == 200) {//Http 응답 코드가 200(OK-정상응답) 이면
				//서버가 응답한 응답 결과 조회
				var txt = xhr.responseText;
				document.getElementById("result_layer").innerHTML = txt;
			} else {//오류응답
				alert(xhr.status + "-" + xhr.statusText);//응답 코드 -응답메세지
			}
		}

	}
</script>
</head>
<body>
	NUM 1 :
	<input type="text" name="num1" id="num1"> NUM 2 :
	<input type="text" name="num2" id="num2">
	<input type="button" value="덧셈계산" onclick="calculate();">
	<div id="result_layer"></div>
</body>
</html>